﻿#include('/header.html', {title : '课程信息'})
<body class="es-main-default es-nav-default ">
<div class="es-wrap">
  <div id="content-container" class="container">
    #include('header.html')
    <div class="row">
      <div class="col-md-3">
        <div class="sidenav locked js-sidenav" data-course-length="1">
          #include('sideMenu.html', {addCourse : 'active'})
        </div>
      </div>
      <div id="course-box" class="col-md-9">
        <div class="panel panel-default">
          <div class="panel-heading">基础信息</div>
          <div class="panel-body">
            <form class="form-horizontal" @submit.prevent="saveInfo">
              <div class="form-group">
                <div class="col-sm-2 control-label">
                  <label class="control-label-required">标题</label>
                </div>
                <div class="col-sm-8">
                  <input type="text" v-model="course.name" class="form-control" required>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">副标题</label>
                <div class="col-sm-8">
                  <textarea v-model="course.subhead" class="form-control"></textarea>
                </div>
              </div>

              <div class="form-group">
                <label class="col-sm-2 control-label">分类</label>
                <div class="col-sm-8 controls">
                  <div class="row">
                    <div class="col-sm-6">
                      <select id="control" v-model="course.specialtyId" class="form-control">
                        <option v-for="(sp, index) in specialties" :index="index" :key="sp.id"
                                :specialty="sp" :value="sp.id">
                          {{sp.name}}
                        </option>
                      </select>
                    </div>
                    <div class="col-sm-6">
                      <select v-model="course.subjectId" class="form-control">
                        <option v-for="sb in subjects" :key="sb.id" :subject="sb"
                                :value="sb.id">
                          {{sb.name}}
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="help-block" style="display:none;"></div>
                </div>
              </div>
              <!--detail-->
              <div class="form-group">
                <div class="col-sm-2 control-label"><label>课程简介</label></div>
                <div class="col-sm-8 controls">
                  <textarea v-model="course.intro" rows="10" class="form-control"></textarea>
                </div>
              </div>

              <div class="form-group dynamic-collection">
                <div class="col-sm-2 control-label"><label>课程目标</label></div>
                <div class="col-sm-8 controls">
                  <input v-model="course.goal" class="width-full select2-offscreen">
                </div>
              </div>

              <div class="form-group" id="courseset-audiences-form-group">
                <div class="col-sm-2 control-label"><label>适应人群</label></div>
                <div class="col-sm-8 controls">
                  <input v-model="course.toPeople" class="width-full select2-offscreen">
                </div>
              </div>
              <!--detail-->
              <!--封面图片-->
              <div class="panel-body">
                <div class="form-group clearfix">
                  <div ref="imgBox" class="col-md-offset-2 col-md-8 controls">
                    <img class="img-responsive" :src="course.cover" width="480">
                  </div>
                  <canvas ref="canvas" class="hide"></canvas>
                </div>
                <div class="form-group clearfix">
                  <div class="col-md-offset-2 col-md-8 controls">
                    <p class="help-block upload-height">请上传jpg, gif, png格式的图片, 建议图片尺寸为 480×270px。<br>建议图片大小不超过<strong>2MB</strong>。
                    </p>
                  </div>
                </div>
                <div class="form-group clearfix">
                  <div class="col-md-offset-2 col-md-8 controls">
                    <a @click="pvwCover" class="upload-picture-btn btn btn-fat btn-primary">选择要上传的图片</a>
                    <input id="upload-cover" type="file" accept="image/*" class="hide">
                  </div>
                </div>
              </div>
              <!--封面图片-->

              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-8">
                  <button type="submit" class="btn btn-primary">
                    保存
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    var courseVm = new Vue({
      el: '#course-box',
      data: {
        course: {specialtyId: 1, subjectId: 1},
        specialty: {},
        specialties: [{}],
        subject: {},
        subjects: [],
        pos: {x: 0, y: 0, w: 480, h: 270},
        upImg: false // 用来判断是不是上传了图片
      },
      methods: {
        tip: function (msg) {
          layer.msg(msg, {time: 1200, title: '提示', icon: 5});
        },
        checkForm: function () {
          if (isEmpty(this.course.name)) {
            this.tip('标题不能为空！');
            return false;
          }
          return true;
        },
        saveInfo: function () {
          var self = this;
          if (this.checkForm()) {
            self.drawCanvas(function (blob) {
              self.upload_(blob, function () {
                $.post('change', self.course, function (data) {
                  if (data.success) {
                    self.changeImg(self.course.cover);
                    $('#upload-cover').val('');
                    self.pos = {x: 0, y: 0, w: 480, h: 270};
                    layer.msg('保存成功！', {time: 1200, icon: 6});
                  }
                });
              });
            });
          }
        },
        pvwCover: function () {
          var self = this;
          var inp = document.getElementById('upload-cover');
          inp.onchange = function () {
            self.upImg = true;
            if (inp.value !== '') {
              var file = inp.files[0];
              if (file.size < 2 * 1024 * 1024) {
                self.changeImg(self.getLocalSrc(file), true);
              } else {
                layer.msg("图片超过2M！", {icon: 5});
              }
            }
          };
          inp.click();
        },
        changeImg: function (src, crop) {
          var self = this;
          var ib = self.$refs.imgBox;
          var img = document.createElement("img");
          img.classList.add('img-responsive');
          img.width = 480;
          img.src = src;
          ib.innerHTML = '';
          ib.appendChild(img);
          if (crop) {
            $(img).Jcrop({
              aspectRatio: 48 / 27,
              minSize: [240, 135],
              onRelease: function () {
                this.setSelect([self.pos.x, self.pos.y, self.pos.w, self.pos.h]);
              },
              onSelect: function (c) {
                self.pos.x = c.x;
                self.pos.y = c.y;
                self.pos.w = c.w;
                self.pos.h = c.h;
              }
            }, function () {
              this.animateTo([self.pos.x, self.pos.y, self.pos.w, self.pos.h]);
            });
          }
        },
        getLocalSrc: function (file) {
          var URL = window.URL || window.webkitURL;
          return URL.createObjectURL(file);
        },
        upload_: function (blob, fun) {
          if (!this.upImg) { // 只有修改了图片才会进行上传
            fun ? fun() : null;
          } else {
            var fd = new FormData();
            fd.append("file", blob, "image.png");
            fd.append("type", "course_icon");
            fd.append("kid", courseVm.course.id);
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/file/t/upload", true);
            xhr.onload = function () {
              var data = JSON.parse(xhr.responseText);
              if (data.success) {
                var result = data.payload;
                courseVm.course.cover = result.path;
                fun ? fun() : null;
              } else {
                layer.msg("上传失败！" + data.msg, {time: 1500, icon: 5});
              }
            };
            xhr.send(fd);
          }
        },
        drawCanvas: function (fun) {
          var img = this.$refs.imgBox.getElementsByTagName('img')[0];
          var cv = this.$refs.canvas;
          var rt = img.naturalWidth / 480;
          cv.width = this.pos.w;
          cv.height = this.pos.h;
          var ctx = cv.getContext("2d");
          ctx.drawImage(img, this.pos.x * rt, this.pos.y * rt, this.pos.w * rt, this.pos.h * rt,
              0, 0, this.pos.w, this.pos.h);
          cv.toBlob(fun);
        },
        getSubject: function (spid) {
          $.post('/course/type/subject/sp_page', {specialtyId: spid}, function (data) {
            courseVm.subjects = [];
            if (data.success) {
              courseVm.subjects = data.payload.rows;
            }
          });
        }
      },
      created: function () {
        $.post('/course/type/specialty/page', function (data) {
          courseVm.specialties = [];
          if (data.success) {
            courseVm.specialties = data.payload.rows;
          }
        });
        this.getSubject(this.course.specialtyId);
      },
      mounted: function () {
        var self = this;
        $("#control").change(function () {
          var specialtie = self.specialties[$("#control option").index($('#control option:selected'))];
          self.getSubject(specialtie.id);
        });
      }
    });

    $(document).ajaxComplete(function () {
      courseVm.course = Hvm.course;
    });
  </script>
</div>
#include('/footer.html')
        
